<template>
    <div class="add-form">
        <el-dialog title="新增" :visible.sync="dialogFormVisible">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="基本信息" name="first">
                    <el-form ref="dataAddForm" :model="formData" label-position="right" label-width="100px">
                        <el-input type="hidden" v-model="formData.id"></el-input>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="学生名称" prop="name">
                                    <el-input v-model="formData.name"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="出生日期" prop="birthday">
                                    <el-date-picker v-model="formData.birthday"  type="date" placeholder="选择日期"  style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>

                        </el-row>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAdd()">确定</el-button>
            </div>
        </el-dialog>
        </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "add",
        data(){
            return {
                activeName:'first',//添加/编辑窗口Tab标签名称
                dialogFormVisible:false,
                formData:{
                    id:"",
                    name:"",
                    birthday:""
                }
            }
        },
        methods:{
          getById(id){
              //this.dialogFormVisible = true
               axios.get("http://localhost:8888/people/findById?id="+id).then(res=>{
                    this.formData = res.data
               })
          },
            handleAdd () {
                  axios.post("http://localhost:8888/people/add",this.formData).then((res) => {
                      this.$message({
                          type: res.data.flag ? 'success' : 'error',
                          message: res.data.message
                      });
                  })
                this.formData={}
                this.dialogFormVisible=false
                location.href = "http://localhost:8080"
            },
        },
        mounted(){
            //在当前方法中获取Id
            var id =  this.$route.params.id;
            if(id == undefined){
                alert("添加");
                this.dialogFormVisible = true
            }else{
                alert("修改");
                this.getById(id)
                this.dialogFormVisible = true
            }
        }
    }
</script>

<style scoped>

</style>
